<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{{site['name']}} - 修改个人信息</title>
  {% include _/base_head.html %}
  <style>
    .input-group-addon { min-width: 5em; }
    .actions > * + * { margin-left: 6px; }
    .w400 { max-width: 430px; }
  </style>
</head>

<body>
<div class="app">
  {% module TopNav() %}
  <div class="m-t-20 w400">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title center">修改个人信息</h3>
      </div>
      <div class="panel-body">
        <form onsubmit="onSubmit();return false;">
          <div class="input-group">
            <span class="input-group-addon">用户名</span>
            <input type="text" readonly class="form-control" value="{{user['username']}}">
          </div>
          <div class="input-group">
            <span class="input-group-addon">姓　名</span>
            <input type="text" id="nickname" class="form-control" value="{{user['nickname']}}"
                   minlength="2" maxlength="8" placeholder="姓名、昵称"
                   pattern="[\u4e00-\u9fa5]{2,4}|[A-Za-z0-9]{3,8}"
                   oninvalid="setCustomValidity('请输入2~4个汉字，或3~8个字母或数字')">
          </div>
          <div class="input-group">
            <span class="input-group-addon">备　忘</span>
            <input type="text" id="verification" class="form-control" data-old="{{user['verification']}}"
                   minlength="2" maxlength="11"
                   pattern="[\u4e00-\u9fa5]+|\d{8,11}"
                   oninvalid="setCustomValidity('2~8个汉字或8~11位手机号')"
                   placeholder="忘记密码验证用，可为2~8个汉字或8~11位手机号">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" onclick="$('#verification').val($('#verification').data('old'))">显示</button>
            </span>
          </div>
          <div class="input-group">
            <span class="input-group-addon">密　码</span>
            <input type="password" id="password" class="form-control" autocomplete="on"
                   required placeholder="输入密码后可修改">
          </div>
          <div class="actions m-t-10 center">
            <input type="submit" class="btn btn-primary" value="修改"/>
            <a href="/" class="btn btn-default">首页</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% include _/base_foot.html %}
<script>
  function onSubmit() {
    const data = {
      password: $('#password').val(),
      nickname: $('#nickname').val(),
      verification: $('#verification').val(),
    }
    postApi('/user/profile', {data: data}, function (res) {
      showSuccess('操作成功', '个人信息已修改', reloadPage)
    })
  }
</script>
</body>
</html>